<template>
  <el-form label-width="120px" @submit.native.prevent="save">
    <el-tabs type="border-card" value="basic">
      <el-tab-pane label="基本信息" name="basic">
        <el-form-item label="品牌">
          <el-select v-model="model.brand">
            <el-option
              v-for="brand_item in brands"
              :key="brand_item._id"
              :label="brand_item.name"
              :value="brand_item._id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="颜色">
          <el-select v-model="model.color">
            <el-option
              v-for="color_item in color"
              :key="color_item._id"
              :label="color_item.name"
              :value="color_item._id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="车型">
          <el-select v-model="model.model">
            <el-option
              v-for="carModel_item in carModel"
              :key="carModel_item._id"
              :label="carModel_item.name"
              :value="carModel_item._id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="燃料类型">
          <el-select v-model="model.fuelType">
            <el-option
              v-for="fuelType_item in fuelType"
              :key="fuelType_item._id"
              :label="fuelType_item.name"
              :value="fuelType_item._id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="车名">
          <el-input v-model="model.name"></el-input>
        </el-form-item>

        <!-- <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="afterUpload"
            :before-upload="beforeAvatarUpload"
            :headers="getAuthHeaders()"
          >
            <img v-if="model.icon" :src="model.icon" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item> -->

        <el-form-item label="车龄">
          <el-input v-model="model.age"></el-input>
        </el-form-item>
        <el-form-item label="里程">
          <el-input v-model="model.milage"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="model.price"></el-input>
        </el-form-item>
        <el-form-item label="变速器类型">
          <el-input v-model="model.TransmissionType"></el-input>
        </el-form-item>
      </el-tab-pane>
      <!-- <el-tab-pane label="详细图片" name="detailPics">
        <el-button size="small" @click="model.detailPics.push({})">
          <i class="el-icon-plusin"></i>添加信息
        </el-button>
        <el-row type="flex" style="flex-wrap: wrap">
          <el-col :md="12" v-for="(item, i) in model.detailPics" :key="i">
            <el-form-item label="名称">
              <el-input v-model="model.detailPics.name">></el-input>
            </el-form-item>
            <el-form-item label="图片">
              <el-upload
                class="avatar-uploader"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="(res) => $set(item, 'icon', res.url)"
                :before-upload="beforeAvatarUpload"
                :headers="getAuthHeaders()"
              >
                <img v-if="item.icon" :src="item.icon" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="描述">
              <el-input type="textarea"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                type="danger"
                @click="model.detailPics.splice(i, 1)"
                >删除</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-tab-pane> -->
    </el-tabs>

    <el-form-item style="margin-top: 1rem">
      <el-button type="primary" native-type="submit">保存 </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      model: {
        detailPics: [],
      },
      brands: [],
      color: [],
      fuelType: [],
      carModel: [],
    };
  },
  methods: {
    afterUpload(res) {
      this.$set(this.model, "icon", res.url);
      // this.model.icon=res.url//普通语法，赋值赋不上
    },
    async fetchBrands() {
      const res = await this.$http.get(`category/brand`);
      this.brands = res;
    },

    async fetchCarModel() {
      const res = await this.$http.get(`category/carModel`);
      this.carModel = res;
    },

    async fetchColor() {
      const res = await this.$http.get(`category/color`);
      this.color = res;
    },

    async fetchFuelType() {
      const res = await this.$http.get(`category/fuelType`);
      this.fuelType = res;
    },

    async save() {
      this.model.userId = sessionStorage.userid;
      const res = await this.$http.post("user/upcars", this.model);
      this.$message({
        type: "success",
        message: "保存成功",
      });
      console.log(res);
    },
  },
  created() {
    this.fetchBrands();
    this.fetchCarModel();
    this.fetchColor();
    this.fetchFuelType();
  },
};
</script>
<style style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  min-width: 5rem;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  min-width: 5rem;
  height: 178px;
  display: block;
}
</style>
